<template>
  <div class="m-header" ref="mHeader">
    <p style="display: none" v-if="public_info"></p>
    <div class="header clearfix">
      <!-- 线上logo -->
      <template v-if="siteType.length === 1">
        <template v-if="siteType.indexOf('ex') !== -1">
          <div class="logo">
            <router-link to="/"><img :src="logo" alt=""></router-link>
          </div>
        </template>
        <template v-if="siteType.indexOf('otc') !== -1">
          <div class="logo">
            <a :href="http + webSiteInfo.ex_pc_url + '/index'"><img :src="logo" alt=""></a>
          </div>
        </template>
      </template>
      <!-- 线下 logo -->
      <template v-else>
        <div class="logo">
          <router-link to="/"><img :src="logo" alt=""></router-link>
        </div>
      </template>
      <!-- 线上代码 -->
      <template v-if="siteType.length === 1">
        <ul class="header-ul clearfix">
          <!-- 当前是币币交易 -->
          <template v-if="siteType.indexOf('ex') !== -1">
            <!-- 币币交易首页 -->
            <li class="header-menu" :class="{'header-menu-bg': showHeaderMenu}" @mouseenter="showHeaderMenu = true"
                @mouseleave="showHeaderMenu = false">
              <i class="icon-menu1"></i><span class="application">{{$t('public.hd.application')}}</span>
              <ul class="header-menu-list" v-show="showHeaderMenu">
                <!-- 币得利 -->
                <li>
                  <router-link to="/bideli">{{$t('myAdd.bideli.saveMoneyLive')}}</router-link>
                </li>
                <!-- 糖果任务 -->
                <li>
                  <router-link to="/candyTask">{{$t('myAdd.candyTask.candyWelfare')}}</router-link>
                </li>
                <li><a href="javascript:;" ref="flash" @click="routerInterception('flash')">{{Internationalization.flash}}</a>
                </li>
                <li>
                  <router-link to="/openPlatform">{{$t('public.hd.openPlatform')}}</router-link>
                </li>
              </ul>
            </li>
            <li v-if="public_info.contractOpen === '1'">
              <!-- 合约交易首页 -->
              <a :href="http + webSiteInfo.co_pc_url + '/index'" target="_self">{{ Internationalization.co }}</a>
            </li>
            <li>
              <router-link to="/trade">{{ Internationalization.currency }}<span></span></router-link>
            </li>
            <li v-if="public_info.otcOpen === '1'">
              <!-- 场外交易首页 -->
              <a :href="http + webSiteInfo.otc_pc_url + '/adsHall'" target="_self">{{ Internationalization.adcenter
                }}</a>
            </li>
            <li v-if="public_info.contractOpen === '1'">
              <!-- 合约交易首页 -->
              <a :href="http + webSiteInfo.co_pc_url" target="_blank">{{ Internationalization.co }}</a>
            </li>
          </template>
          <!-- 当前是合约交易 -->
          <!--  Internationalization.co   Internationalization.coCenter  -->
          <!-- 当前是场外交易 -->
          <template v-if="siteType.indexOf('otc') !== -1">
            <li class="header-menu" :class="{'header-menu-bg': showHeaderMenu}" @mouseenter="showHeaderMenu = true"
                @mouseleave="showHeaderMenu = false">
              <i class="icon-menu1"></i><span class="application">{{$t('public.hd.application')}}</span>
              <ul class="header-menu-list" v-show="showHeaderMenu">
                <li>
                  <a :href="http + webSiteInfo.ex_pc_url + '/bideli'" target="_self">{{$t('myAdd.bideli.saveMoneyLive')}}</a>
                </li>
                <li v-if="public_info.exOpen === '1'">
                  <a :href="http + webSiteInfo.ex_pc_url + '/candyTask'" target="_self">{{$t('myAdd.candyTask.candyWelfare')}}</a>
                </li>
                <li><a href="javascript:;" ref="flash" @click="routerInterception('flash')">{{Internationalization.flash}}</a>
                </li>
                <li>
                  <router-link to="/openPlatform">{{$t('public.hd.openPlatform')}}</router-link>
                </li>
              </ul>
            </li>
            <li v-if="public_info.exOpen === '1'">
              <!-- 币币交易 -->
              <a :href="http + webSiteInfo.ex_pc_url + '/trade'" target="_self">{{ Internationalization.currency
                }}<span></span></a>
            </li>
            <li>
              <!-- 法币交易 -->
              <router-link to="/adsHall">{{ Internationalization.adcenter }}<span></span></router-link>
            </li>
            <li v-if="public_info.contractOpen === '1'">
              <!-- 合约交易首页 -->
              <a :href="http + webSiteInfo.co_pc_url" target="_blank">{{ Internationalization.co }}</a>
            </li>
          </template>
        </ul>
        <ul class="header-ul clearfix" v-if="configHeaderOpen === '1'" v-html='headerTemplate'></ul>
      </template>
      <template v-else>
        <!-- 本地调试 -->
        <ul class="header-ul clearfix">
          <li class="header-menu" :class="{'header-menu-bg': showHeaderMenu}" @mouseenter="showHeaderMenu = true"
              @mouseleave="showHeaderMenu = false">
            <i class="icon-menu1"></i><span class="application">{{$t('public.hd.application')}}</span>
            <ul class="header-menu-list" v-show="showHeaderMenu">
              <!-- 币得利 -->
              <li>
                <router-link to="/bideli">{{$t('myAdd.bideli.saveMoneyLive')}}</router-link>
              </li>
              <!-- 糖果任务 -->
              <li>
                <router-link to="/candyTask">{{$t('myAdd.candyTask.candyWelfare')}}</router-link>
              </li>
              <li><a href="javascript:;" ref="flash"
                     @click="routerInterception('flash')">{{Internationalization.flash}}</a></li>
              <li>
                <router-link to="/openPlatform">{{$t('public.hd.openPlatform')}}</router-link>
              </li>
            </ul>
          </li>
          <li v-if="public_info.exOpen === '1'">
            <router-link to="/trade">{{ Internationalization.currency }}<span></span></router-link>
          </li>
          <li v-if="public_info.otcOpen === '1'">
            <!-- 场外交易大厅 -->
            <router-link to="/adsHall">{{ Internationalization.adcenter }}<span></span></router-link>
          </li>
          <li v-if="public_info.contractOpen === '0'">
            <!-- 合约交易 -->
            <a href="http://swap.test.com" target="_blank">{{ Internationalization.co }}<span></span></a>
          </li>
        </ul>
        <ul class="header-ul clearfix" v-if="configHeaderOpen === '1'" v-html='headerTemplate'></ul>
      </template>
      <!-- 本地调试结束 -->

      <div class="header-right">
        <ul class="rightNav">
          <!-- app下载 -->
          <li class="rightNav_item" :class="{right_active:appdown}" @mouseover="over" @mouseout="out" v-if="downurl.app_page_url">
            <span>{{$t('main.app_download')}}</span>
            <div class="qr_code" v-if="appdown">
              <img :src="downurl.app_page_url " alt="">
              <i>{{$t('main.sweep_download')}}</i>
            </div>
          </li>
          <!-- 公告 -->
          <li class="rightNav_item">
            <router-link to="/notice_info">{{Internationalization.notice}}</router-link>
          </li>
          <li class="rightNav_item">
            <div class="personal_menu select_menu" v-if='islogin'><span class="tegther_icon"><i
              class=" icon-user"></i><b v-if="no_read > 0"></b></span>
              <span>{{userInfor.nickName}}</span>
              <i class="icon-down"></i>
              <ul>
                <li>
                  <router-link to="/personal/information"><i class="icon-user"></i>{{$t('public.hd.userCenter')}}
                  </router-link>
                </li>
                <li>
                  <router-link to="/funds"><i class="icon-money"></i>{{ Internationalization.capital }}</router-link>
                </li>
                <li>
                  <router-link to="/order"><i class="icon-order"></i>{{$t('public.hd.orderManage')}}</router-link>
                </li>
                <!-- <li @click="isShowDialog = true"><i class="icon-setting"></i>{{$t('public.hd.set')}}</li>-->
                <li @click="logout"><i class="icon-logout"></i>{{$t('public.hd.logout')}}</li>
              </ul>
            </div>
            <span v-else class="loginOrRegister">
              <a class="login" @click="login()"></a>
              <router-link class="login" to="/login">{{ Internationalization.login }}</router-link>
              <em>|</em>
              <router-link class="register" to="/register">{{ Internationalization.register }}</router-link>
            </span>
          </li>
          <!-- 皮肤切换 -->
          <!-- <li class="rightNav_item">
            <a href="javascript:;" v-if="themeType === 'theme_white'" @click="changetheme('theme_default')">
                 <i class="icon-moon"></i>

            </a>
            <a href="javascript:;" v-else @click="changetheme('theme_white')">
                <i class="icon-sun"></i>
            </a>
          </li> -->

          <!--   <li class="rightNav_item">
                   <div class="select_menu">
                     <a href="javascript:;">{{$t('main.theme')}}</a>
                     <i class="icon-down"></i>
                     <ul class="themeList">
                       <template v-for="(item, index) in themeFormData.optionList">
                         <li :key='index'
                           @click="changetheme(item.code)"
                           :class="{selected: themeType === item.code}">
                             {{item.value}}
                         </li>
                       </template>
                     </ul>
                   </div>
                 </li> -->
          <li class="rightNav_item">
            <div class="lang select_menu" @click='lanMarkShow'>
                <span>
                  <i class="flag_icon" :class="lanId"></i>
                </span>
              <ul class="langMark">
                <template v-for='(v, i) in lanList'>
                  <li :key='i' @click.stop='lanClick(v.id)'>
                    <i class="flag_icon" :class="v.id"></i>
                    {{ v.name }}
                  </li>
                </template>
              </ul>
              <i class="icon-down"></i>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <el-dialog
      :title='tiptlText'
      :flag='isShowDialog'
      name='isShowDialog'
      :width='450'
      :dialogClose='closeDialog'>
      <div class="setThemePop" slot="content">
        <!--<div v-if="legalTender">
          <inline-input
            :property = "legalTender"
            v-model="legalTender.value"
            v-on:onevents="somethings" >
          </inline-input>
        </div>
        <div v-if="themeForm">
          <inline-input
            :property = "themeForm"
            v-model="themeForm.value"
            v-on:onevents="somethings" >
          </inline-input>
        </div>
        <br >  <br ><br ><br ><br ><br ><br > -->

        <div class="setTheme">
          <div class="inlint-title">
            {{$t('main.theme')}}
          </div>
          <div class="radioLine">
            <span class="tadioTd">
              <input type="radio" id="one" name="theme" value="theme_default" v-model="themeType">
              <label for="one">{{$t('main.blueTheme')}}</label>
            </span>
            <span class="tadioTd">
              <input type="radio" id="two" name="theme" value="theme_white" v-model="themeType">
              <label for="two">{{$t('main.whiteTheme')}}</label>
            </span>
            <span class="tadioTd">
              <input type="radio" id="two" name="theme" value="theme_black" v-model="themeType">
              <label for="two">{{$t('main.blackTheme')}}</label>
            </span>
          </div>
        </div>
      </div>
      <div slot="options">
        <button @click="setTheme">{{$t('trade.confirm')}}</button>
      </div>
    </el-dialog>
    <!-- 提示实名认证弹窗 -->
    <elDialog
      title=''
      :flag='realNameAlert'
      name='realNameAlert'
      :width='450'
      :dialogClose='closeDialog'>
      <div class="realNameCont" slot="content">
        {{$t('public.hd.pleaseRealName')}}
      </div>
      <div slot="options">
        <button @click="closeDialog" class="cancel">{{$t('public.hd.cancel')}}</button>
        <router-link tag="button" :to="{path: 'personal/information'}">{{$t('public.hd.toRealName')}}</router-link>
      </div>
    </elDialog>
  </div>
</template>
<script>
  import {mapState} from 'vuex'
  import {changeLanguage} from '@/locale'
  import changeTheme from '../../utils/changeTheme.js'
  import elDialog from '@/components/common/addCommon/dialog'
  import InlineInput from '@/components/common/inlineInput'
  import eventBus from '../../apis/bus'  // 引入bus

  export default {
    name: 'm-header',
    components: {elDialog, InlineInput},
    data() {
      return {
        islogin: false,
        isShowDialog: false,
        userInfor: null,
        lanList: [],
        lan: '',
        lanId: '',
        lanMarkFlag: false,
        no_read: '',
        logo: null,
        host: this.$store.state.baseData._webSiteInfo,
        otcSubLink: false,
        legalTender: {},
        themeForm: {},
        themeType: localStorage.getItem('theme-type'),
        rate: null,
        otcOpen: null,
        coOpen: null,
        siteType: [],
        webSiteInfo: null,
        logoutFla: true,
        http: location.protocol + '//',
        appdown: false,
        downurl: '',
        headerBg: '',
        headerFix: false,
        configHeaderOpen: true,
        headerTemplate: null,
        showHeaderMenu: false,
        isFlashOpen: '0',
        isZoologyOpen: '0', // 是否开启生态收益
        realNameAlert: false
      }
    },
    mounted() {
      const _self = this
      this.legalTender = this.legalTenderFormObj
      this.themeForm = this.themeFormData
      this.getApp()
      // 利用bus进行通信
      eventBus.$on('changeHeaderStyle', function (msg) {
        msg = JSON.parse(msg)
        this.headerFix = msg.fix
        if (this.headerFix) {
          _self.changeStyle()
          _self.$emit('paddingTop', '0')
          this.$forceUpdate() // 强制渲染
        }
      })
      eventBus.$on('reHeaderStyle', function (msg) {
        msg = JSON.parse(msg)
        this.headerFix = msg.fix
        if (!this.headerFix) {
          _self.reStyle()
          _self.$emit('paddingTop', '60')
        }
      })
      eventBus.$on('reHeaderStylegBg', function (msg) {
        msg = JSON.parse(msg)
        if (msg.bg) {
          _self.reStyle()
        }
      })
      // 接受ex组件传递过来得事件
      eventBus.$on('changeOpacity', (msg) => {
        msg = JSON.parse(msg)
        if (!msg) {
          _self.headerOpacity0()
        }
      })
      eventBus.$on('changeOpacity', (msg) => {
        msg = JSON.parse(msg)
        if (msg) {
          _self.headerOpacity1()
        }
      })
      // 当页面刷新的时候 给 按钮添加样式
      this.$route.path === '/flash' && this.$refs.flash.classList.add('router-link-exact-active')
    },
    computed: {
      ...mapState({
        public_info({baseData}) {
          if (baseData._lanList) {
            this.lanList = baseData._lanList
            this.islogin = baseData.isLogin
            this.logo = baseData.logo
            this.userInfor = baseData._user
            this.rate = baseData._rate
            this.otcOpen = baseData.otcOpen
            this.coOpen = baseData.contractOpen
            this.siteType = baseData._siteType
            this.webSiteInfo = baseData._webSiteInfo
            this.configHeaderOpen = baseData._data.config_header_open
            this.headerTemplate = baseData.headerTemplate
            this.isZoologyOpen = baseData.isZoologyOpen
            this.isFlashOpen = baseData.isFlashOpen
            baseData._lanList.forEach(element => {
              if (element.id === baseData._lan) {
                this.lan = element.name
                this.lanId = element.id
              }
            })
            return baseData
          } else {
            return false
          }
        }
      }),
      legalTenderFormObj() {
        return {
          title: this.$t('main.fbdw'),
          formType: 'select',
          placeholder: this.$t('personal.placeholder_2'),
          name: 'legalTender',
          value: '1',
          optionList: [
            {value: '$ USD', code: '1'},
            {value: '￥ CNY', code: '2'},
            {value: '₩ KRW', code: '3'}
          ]
        }
      },
      themeFormData() {
        return {
          title: this.$t('main.theme'),
          formType: 'select',
          placeholder: '',
          name: 'themeFormData',
          value: this.themeType,
          optionList: [
            {value: this.$t('main.blueTheme'), code: 'theme_default'},
            {value: this.$t('main.whiteTheme'), code: 'theme_white'},
            {value: this.$t('main.blackTheme'), code: 'theme_black'}
          ]
        }
      },
      tiptlText() {
        return this.$t('public.hd.set')
      },
      // 国际化
      Internationalization() {
        return {
          login: this.$t('public.hd.login'), // 登陆
          register: this.$t('public.hd.register'), // 注册
          co: this.$t('public.hd.co'), // 合约交易
          coCenter: this.$t('public.hd.coCenter'), // 合约大厅
          capital: this.$t('public.hd.capital'), // 资金管理
          transaction: this.$t('public.hd.transaction'), // 场外交易
          currency: this.$t('public.hd.currency'), // 币币交易
          currencyMall: this.$t('public.hd.currencyMall'), // 币币交易大厅
          home: this.$t('public.hd.home'), // 首页
          adcenter: this.$t('public.hd.adcenter'), // '场外大厅',
          msgcenter: this.$t('public.hd.msgcenter'), // '消息中心',
          set: this.$t('public.hd.set'), // '设置',
          superNode: this.$t('myAdd.footItem.supperNode'), // 超级节点
          notice: this.$t('public.hd.notice'), // 公告
          flash: this.$t('public.hd.flash'), // 闪兑
          unOpen: this.$t('public.hd.unOpen'), // 未开启
          logoutSuc: this.$t('public.hd.logoutSuc') // 退出成功
        }
      }
    },
    watch: {
      'legalTenderFormObj'(val) {
        this.legalTender = val
      },
      '$store.state.mesage.mesg'(val) {
        this.getRead()
      },
      'public_info.isLogin'(val) {
        let that = this
        if (val === true) {
          this.getRead()
          setInterval(function () {
            that.getRead()
          }, 30000)
        }
      },
      // 关于实名认证
      '$route.path'(newV, oldV) {
        this.$refs.flash.classList.remove('router-link-exact-active')
        newV === '/personal/information' && (this.realNameAlert = false)
        newV === '/flash' && this.$refs.flash.classList.add('router-link-exact-active')
      }
    },
    methods: {
      // 以下是胖虎添加
      // 改变头部导航的样式
      changeStyle() {
        if (this.$refs['mHeader']) {
          this.$refs['mHeader'].classList.add('trans')
        }
      },
      // 恢复头部导航的默认样式
      reStyle() {
        if (this.$refs.mHeader) {
          this.$refs.mHeader.classList.remove('trans')
        }
      },
      headerOpacity0() {
        if (this.$refs.mHeader) {
          this.$refs.mHeader.style.opacity = 0
        }
      },
      headerOpacity1() {
        if (this.$refs.mHeader) {
          this.$refs.mHeader.style.opacity = 1
        }
      },
      // END 以上是胖虎添加
      gotoEx() {
        window.location.href = location.protocol + '//' + this.webSiteInfo.ex_pc_url + '/trade'
      },
      gotoHall() {
        window.location.href = location.protocol + '//' + this.webSiteInfo.otc_pc_url + '/adsHall'
      },
      gotopublish() {
        window.location.href = location.protocol + '//' + this.webSiteInfo.otc_pc_url + '/publishAds'
      },
      // input组件 返回事件
      somethings(data) {
        console.log(data)
        if (data.handleType === 'selected' && data.name === 'themeFormData') {
          this.themeType = data.value.code
        }
        if (data.handleType === 'selected' && data.name === 'legalTender') {
          this.selected(data)
        }
      },
      // 选择
      selected(data) {
        this.$forceUpdate(() => {
          this.legalTender.value = data.value.code
        })
      },
      setTheme() {
        changeTheme(this.themeType)
        localStorage.setItem('theme-type', this.themeType)
        this.$store.commit('THEME', this.themeType)
        this.isShowDialog = false
      },
      changetheme(type) {
        changeTheme(type)
        localStorage.setItem('theme-type', type)
        this.themeType = type
        this.$store.commit('THEME', type)
      },
      // 关闭弹窗
      closeDialog(e) {
        this[e] = false
        this.realNameAlert = false
      },
      // 跳转至移动端
      goMobile() {
        window.open(location.protocol + '//' + window.HOST_API.h5_url)
      },
      getUid(isOpen) {
        if (isOpen === 0) {
          window.location.href = location.protocol + '//' + this.webSiteInfo.otc_pc_url + '/otc_personal'
        } else {
          location.pathname.indexOf('otc_personal') > -1 && window.location.reload()
          this.$router.push('/otc_personal')
        }
      },
      swithchotcSubLink() {
        this.otcSubLink && (this.otcSubLink = false)
        !this.otcSubLink && (this.otcSubLink = true)
      },
      login() {
        this.$router.push({name: 'login'})
      },
      regs() {
        this.$router.push({name: 'register'})
      },
      // 退出登录
      logout() {
        if (!this.logoutFla) return false
        this.logoutFla = false
        this.axios({
          url: this.$store.state.url.user.login_out,
          headers: {},
          params: {},
          method: 'post'
        }).then((data) => {
          if (data.code === '0') {
            this.$store.commit('ISLOGIN', false)
            this.logoutFla = true
            this.$store.dispatch('setTipState', {text: this.Internationalization.logoutSuc})
          } else {
            this.logoutFla = true
            this.$store.dispatch('setTipState', {text: data.msg, type: 'error'})
          }
        })
      },
      message() {
        this.$router.push({name: 'mesage'})
      },
      // 切换语言
      lanClick(lan) {
        if (this.islogin) {
          this.axios({
            url: this.$store.state.url.common.language,
            headers: {},
            params: {language: lan},
            method: 'post'
          }).then((data) => {
            if (data.code === '0') {
              localStorage.lan = lan
              this._COOKIE.setCookie('lan', lan)
              this.$store.commit('LAN', lan)
              this.public_info._lanList.forEach(element => {
                if (element.id === lan) {
                  this.lan = element.name
                  this.lanId = lan
                }
              })
              changeLanguage(lan)
              this.lanMarkFlag = false
            } else {
              this.$store.dispatch('setTipState', {text: data.msg, type: 'error'})
            }
          })
        } else {
          localStorage.lan = lan
          this._COOKIE.setCookie('lan', lan)
          this.$store.commit('LAN', lan)
          this.public_info._lanList.forEach(element => {
            if (element.id === lan) {
              this.lan = element.name
              this.lanId = lan
            }
          })
          changeLanguage(lan)
          this.lanMarkFlag = false
        }
      },
      lanMarkShow() {
        this.lanMarkFlag = true
      },
      getRead() {
        this.axios({
          url: this.$store.state.url.mesage.message_count,
          headers: {},
          params: {},
          method: 'post'
        }).then((data) => {
          if (data.code === '0') {
            this.no_read = data.data.noReadMsgCount
          }
        })
      },
      over() {
        this.appdown = true
      },
      out() {
        this.appdown = false
      },
      getApp() {
        this.axios({
          url: this.$store.state.url.common.download,
          headers: {},
          params: {},
          method: 'post'
        }).then((data) => {
          if (data.code === '0') {
            this.downurl = data.data
          }
        })
      },
      // 关于某些页面是否开启的路由拦截
      routerInterception(pageRoute) {
        switch (pageRoute) {
          case 'flash':
            this.isFlashOpen === '0' && this.$store.dispatch('setTipState', {text: this.Internationalization.unOpen})
            if (this.isFlashOpen === '1') {
              this.toTargetPage(pageRoute)
            }
            break
        }
      },
      // 去相应的页面
      toTargetPage(pageRoute) {
        // 这里做是否 实名 的 判断
        if (!this.islogin) {
          this.$router.push({path: '/login'})
        } else {
          this.userInfor.authNewLevel === 'C0' && (this.realNameAlert = true)
          if (this.userInfor.authNewLevel !== 'C0') {
            if (this.siteType.length === 1) { // 线上
              if (this.siteType.indexOf('ex') !== -1) {
                this.$router.push({path: '/' + pageRoute})
              } else if (this.siteType.indexOf('otc') !== -1) {
                window.location.href = this.http + this.webSiteInfo.ex_pc_url + '/' + pageRoute
              }
            } else { // 线下
              this.$router.push({path: '/' + pageRoute})
            }
          }
        }
      }
    }
  }
</script>
<style>
  .m-header {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 100;
    transition: .3s ease all;
  }

  .trans {
    background: transparent !important;
  }
</style>





